<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import ConsoleInfoBox from "./ConsoleInfoBox.vue";
import { useUserStore } from "../../utils/store/store";
import { newsList as newsMockData, type newsType } from "../../utils/ts/news";
import { request } from "../../utils/axios/request";
import ConsoleTable4 from "./ConsoleTable/ConsoleTable4.vue"
// import ConsoleTable5 from "./ConsoleTable/ConsoleTable5.vue"
// import ConsoleTable6 from "./ConsoleTable/ConsoleTable6.vue"
// import ConsoleTable7 from "./ConsoleTable/ConsoleTable7.vue"
import ConsoleTable8 from "./ConsoleTable/ConsoleTable8.vue"
// import ConsoleTable9 from "./ConsoleTable/ConsoleTable9.vue"
import ConsoleTable10 from "./ConsoleTable/ConsoleTable10.vue"
import { useRouter } from "vue-router";
// import ConsoleTable1 from "./ConsoleTable1.vue";
// import ConsoleTable2 from "./ConsoleTable2.vue";
// import ConsoleTable3 from "./ConsoleTable3.vue";
// import { tableBg } from "../../utils/scss/color";

const userStore = useUserStore();
const userData = computed(() => userStore.getUser());
const newsList = ref<newsType[]>([]);
const router = useRouter();

onMounted(() => {
  request<newsType[]>(newsMockData).then((res) => {
    newsList.value = res.data;
    // console.log(res.data);
  });
});
// const newsList = request();

const visible = ref<boolean>(false);

const showModal = () => {
  visible.value = true;
};

const handleOk = (e: MouseEvent) => {
  console.log(e);
  visible.value = false;
};

const value = ref<string>("");

const toNews = () => {
  // window.location.href = "/#/news/1";
  router.push({ path: '/news/1' })
};
</script>

<template>
  <div class="bgBox">
    <div class="contentContainer">
      <ConsoleInfoBox icon="/console/box1.png" title="账号信息" class="left">
        <template #default>
          <div class="userInfo">
            <img :src="userData?.avatar || './console/user0.png'" alt="" />
          </div>
          <h3>
            {{ userData?.verified ? userData?.name : "未认证用户" }}
          </h3>

          <router-link to="/account/identify" class="charge">
            点击认证
          </router-link>

          <div class="footer">
            <div class="left">会员ID: {{ userData?.id || "0" }}</div>
            <div class="right">绑定手机：{{ userData?.phone || "未绑定" }}</div>
          </div>
        </template>
      </ConsoleInfoBox>
      <ConsoleInfoBox icon="/console/box2.png" title="账户概览" class="mid md:mx-5">
        <template #default>
          <div class="tips">可用余额(元)</div>
          <h3>
            {{ userData?.bal || 0 }}
          </h3>

          <!-- <a href="/#/finance/charge" class="charge">充值</a> -->
          <router-link to="/finance/charge" class="charge">
            充值
          </router-link>

          <ul class="list">
            <li>
              <router-link to="/finance/bills">收支明细</router-link>
            </li>
            <li>
              <router-link to="/finance/receipt">发票申请</router-link>
            </li>
            <li>
              <router-link to="/service/workorder">合同申请</router-link>
            </li>
            <li>
              <router-link to="" @click="showModal">余额预警</router-link>
            </li>
          </ul>

          <div class="footer">
            <div class="left">
              历史总消费：
              <span>
                {{ userData?.wallet?.totalSpend || "0" }}
                元
              </span>
            </div>
            <div class="right">
              本月消费：
              <span>
                {{ userData?.wallet?.monthSpend || "0" }}
                元
              </span>
            </div>
          </div>
        </template>
      </ConsoleInfoBox>

      <ConsoleInfoBox icon="/console/box3.png" title="官方动态" class="right">
        <template #default>
          <ul class="newsList">
            <li v-for="item in newsList" :key="item.id" @click="toNews">
              <a href="javascript: void(0)">
                <span class="subTitle">
                  {{ item.title }}
                </span>
                <span class="title">{{ item.content }}</span>
              </a>

              <span class="date">{{ item.date }}</span>
            </li>
          </ul>
        </template>
      </ConsoleInfoBox>
    </div>
    <div class="botContainer hidden md:block">
      <ConsoleInfoBox icon="/console/box4.png" title="软件概览" class="bot">
        <template #default>
          <!-- :style="{ background: tableBg }" -->
          <div class="botContent flex justify-around flex-wrap">
            <div class="mb-5">
              <ConsoleTable4 />
            </div>
            <!-- <div class="mb-5">
              <ConsoleTable5 />
            </div> -->
            <div class="mb-5">
              <ConsoleTable8 />
            </div>
            <div class="mb-5">
              <ConsoleTable10 />
            </div>

            <!-- <div class="mb-5">
              <ConsoleTable7 />
            </div> -->
            <!-- <ConsoleTable1 />
            <ConsoleTable2 />
            <ConsoleTable3 /> -->
          </div>
        </template>
      </ConsoleInfoBox>
    </div>
  </div>

  <a-modal v-model:visible="visible" title="余额预警" @ok="handleOk">
    <div class="p-5 pb-2">
      <a-input v-model:value="value" placeholder="金额" class="mb-4" />
      <p>注: 为0不开启预警，填写x元则开启预警</p>
    </div>
  </a-modal>
</template>

<style lang="scss" scoped>
.bgBox {
  padding: 0.94rem;
  background-color: #f0f2f5;
  min-height: calc(100vh - 64px);

  .bot {
    margin-top: 0.94rem;
    width: 100%;
    // height: 31.25rem;
    height: fit-content;

    .botContent {
      display: flex;
      // background-color: #2d3340;
    }
  }

  .contentContainer {
    display: flex;
    flex-wrap: wrap;

    .charge {
      display: inline-block;
      width: 12.5rem;
      height: 2.5rem;
      line-height: 2.5rem;
      background-color: #fa0;
      font-size: 0.88rem;
      color: #fff;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }

    .right {
      .newsList {
        display: flex;
        flex-direction: column;
        padding: 0 0.94rem;

        li:last-child {
          border-bottom: 0rem;
        }

        li {
          display: flex;
          height: 3.13rem;
          line-height: 3.13rem;
          border-bottom: 0.06rem solid #e6ebf5;

          a {
            flex: 1;
            display: flex;

            .subTitle {
              color: #333;
              margin-right: 0.31rem;
            }

            span {
              display: inline-block;
              color: #1861f2;
              font-size: 0.88rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .date {
            color: #999;
            width: 25%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.88rem;
          }
        }
      }
    }

    .mid {
      // flex: 1;
      // margin: 0 0.94rem;

      .tips {
        text-align: center;
        margin-bottom: 0.94rem;
        font-weight: 700;
        font-size: 0.88rem;
        color: #333;
      }

      .tips+h3 {
        text-align: center;
        font-weight: bold;
        margin-bottom: 0.69rem;
        font-size: 1.63rem;
        color: #fa0;
        font-weight: 700;
        line-height: 2.44rem;
      }



      .list {
        display: flex;
        margin: 0 auto;
        justify-content: center;
        padding-top: 1.88rem;

        li:first-child {
          margin-left: 0rem;
        }

        li {
          margin-left: 0.63rem;

          a {
            color: #1861f2;
            text-decoration: none;
            background-color: transparent;
            outline: none;
            cursor: pointer;
            transition: color 0.3s;
            font-size: 0.88rem;
          }
        }
      }

      .footer {
        border-top: 1px solid #fdc !important;
        background-color: #fff5e0;

        span {
          font-weight: 700;
          color: #fa0;
          font-size: 0.88rem;
        }
      }
    }

    .footer {
      position: absolute;
      bottom: 0rem;
      display: flex;
      height: 5rem;
      width: 100%;
      align-items: center;
      justify-content: space-around;
      border-top: 0.06rem solid #e6ebf5;

      div {
        font-size: 0.88rem;
        color: #333;
      }
    }

    .left {
      width: 30%;

      .userInfo {
        display: flex;
        justify-content: center;

        img {
          width: 5.63rem;
          height: 5.63rem;
        }
      }

      h3 {
        text-align: center;
        margin: 0.94rem 0 1.25rem;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1861f2;
        line-height: 1.88rem;
      }
    }
  }
}
</style>
